<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image src="http://img.cpgm.cc/panda/static/invite/title2.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<p class="title">宝箱有几率开出以下图鉴人物，可直接兑换银元</p>
			<view class="list">

				<view class="item" v-for="(item,index) in list" :key="index" v-if="item.type == 2 && item.id < 25">
					<view class="left">
						<image :src="imgurl + item.img" mode="widthFix" />
						<view class="word">
							<text>{{item.name}}</text>
							<text>可兑换<span>{{bouns[item.id].explain}}</span>银元</text>
							<text>数量：<span>{{item.num}}</span></text>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="exchange(item.id)">兑换</u-button>
				</view>

				<!-- 木吒+海夜叉 -->
				<view class="item2">
					<view class="left">
						<view>
							<image src="http://img.cpgm.cc/panda/static/invitebox/27.png" mode="widthFix" />
							<text><span>{{list[9].num > 0?'已获得':'未获得'}}</span></text>
						</view>
						<image class="jia" src="http://img.cpgm.cc/panda/static/invitebox/jia.png" mode="widthFix" />
						<view>
							<image src="http://img.cpgm.cc/panda/static/invitebox/28.png" mode="widthFix" />
							<text><span>{{list[10].num > 0?'已获得':'未获得'}}</span></text>
						</view>
					</view>
					<view class="right">
						<view class="word">
							<text>木吒+海夜叉</text>
							<text>可兑换<span>666</span>银元</text>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="exchange(27)">兑换</u-button>
					</view>
				</view>
				
				<!-- 老鼠精+巨灵神 -->
				<view class="item2">
					<view class="left">
						<view>
							<image src="http://img.cpgm.cc/panda/static/invitebox/25.png" mode="widthFix" />
							<text><span>{{list[7].num > 0?'已获得':'未获得'}}</span></text>
						</view>
						<image class="jia" src="http://img.cpgm.cc/panda/static/invitebox/jia.png" mode="widthFix" />
						<view>
							<image src="http://img.cpgm.cc/panda/static/invitebox/26.png" mode="widthFix" />
							<text><span>{{list[8].num > 0?'已获得':'未获得'}}</span></text>
						</view>
					</view>
					<view class="right">
						<view class="word">
							<text>老鼠精+巨灵神</text>
							<text>可兑换<span>1888</span>银元</text>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="exchange(25)">兑换</u-button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 确定开宝箱弹窗 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image src="http://img.cpgm.cc/panda/static/invite/t1.png" mode="widthFix" />
					<view class="m_tit">恭喜您成功兑换</view>
					<view class="m_con"><text>{{price}}</text>银元</view>
					<view @click="show = false" class="button confirm">开心收下</view>
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000',
				},
				show:false,
				list:'',
				imgurl: config.imgurl,
				bouns:[
					{},
					{
						id:1,
						explain:'100'
					},
					{
						id:2,
						explain:'0.01~5'
					},
					{
						id:3,
						explain:'0.02~10'
					},
					{
						id:4,
						explain:'0.05~20'
					},
					{
						id:5,
						explain:'0.1~50'
					},
					{
						id:6,
						explain:'0.2~100'
					},
					{
						id:7,
						explain:'0.5~300'
					},
					{
						id:8,
						explain:'1~600'
					},
					{
						id:9,
						explain:'2~1000'
					},
					{
						id:10,
						explain:'1'
					},
					{
						id:11,
						explain:'5'
					},
					{
						id:12,
						explain:'18'
					},
					{
						id:13,
						explain:'68'
					},
					{
						id:14,
						explain:'188'
					},
					{
						id:15,
						explain:'388'
					},
					{
						id:16,
						explain:'999'
					},
					{
						id:17,
						explain:'1888'
					},
					{
						id:18,
						explain:'188'
					},
					{
						id:19,
						explain:'88'
					},
					{
						id:20,
						explain:'38'
					},
					{
						id:21,
						explain:'18'
					},
					{
						id:22,
						explain:'5'
					},
					{
						id:23,
						explain:'3'
					},
					{
						id:24,
						explain:'1'
					},
					{
						id:25,
						explain:'1888'
					},
					{
						id:26,
						explain:'1888'
					},
					{
						id:27,
						explain:'666'
					},
					{
						id:28,
						explain:'666'
					},
					{
						id:29,
						explain:'6666'
					},
					{
						id:30,
						explain:'6666'
					},
					{
						id:31,
						explain:'6666'
					},
					{
						id:32,
						explain:'666'
					},
					{
						id:33,
						explain:'6666'
					}
				],
				price:'',
			};
		},
		onLoad(){
			this.myPics();
		},
		methods: {
			// 获取我的图鉴
			async myPics (){
				let res = await this.$http.index.myPics({
					type:2
				});
				this.list = res.data
			},

			// 图鉴兑换
			async exchange(id){
				let res = await this.$http.index.inviteexchange({
					id:id
				})
				if(res.code == 1) {
					this.price = res.data
					this.show = true
					this.myPics();
				}else {
					this.$u.toast(res.msg)
				}
			},

		},
	}
</script>

<style lang="less">

.zone {
	background: #000;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: flex-end;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
				width: 35%;
				margin-left: 5px;
			}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.main {
		padding: 10px;
	}

	.list {
		margin-top: 10px;
	}

	.item {
		background: linear-gradient(180deg, #F2E0FF 0%, #FFFFFF 100%);
		border-radius: 7px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 15px;
		margin-bottom: 10px;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 92px;
				margin-right: 10px;
			}

			.word {
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					color: #000;
					font-weight: 600;
				}
				text:nth-child(2) {
					font-size: 12px;
					color: #343434;
					margin: 5px 0;
					span {
						color: #FE431A;
						font-weight: 600;
					}
				}
				text:nth-child(3) {
					font-size: 12px;
					color: #343434;
					span {
						color: #FE431A;
						font-weight: 600;
					}
				}
			}
		}

		.button {
			width: 82px;
			height: 33px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 5px;
			color: #fff;
			font-size: 14px;
		}
	}

	.title {
		color: #fff;
	}




	.item2{
		background: linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
		border-radius: 7px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px 10px 0;
		margin-bottom: 10px;

		.left {
			display: flex;
			align-items: center;
			view {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 92px;
				}
				text {
					color: #343434;
					font-size: 12px;
					span {
						color: #FE431A;
					}
				}
			}

			.jia {
				width: 20px;
				margin: 0 10px;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.word {
				display: flex;
				flex-direction: column;
				text:nth-child(1) {
					font-size: 14px;
					font-weight: 800;
					color: #fff;
					line-height: 24px;
					background: linear-gradient(180deg, #FF456B 0%, #FE5C4F 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				text:nth-child(2) {
					font-size: 12px;
					font-weight: 800;
					color: #343434;

					span {
						color: #FE431A;
					}
				}
			}

			.button {
				width: 82px;
				height: 33px;
				background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
				border-radius: 5px;
				color: #fff;
				font-size: 14px;
				margin-top: 5px;
			}
		}

	}



// 领取奖励弹窗

.maskbox {
	background: linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 70px;
	}

	.m_tit {
		color: #000000;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		margin-top: 20px;
	}

	.m_con {
		color: #343434;
		font-size: 14px;
		margin-top: 10px;

		text {
			font-size: 35px;
			font-weight: bold;
			color: #343434;
			line-height: 72px;
			background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%), linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.confirm {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		width: 80%;
		height: 50px;
		color: #fff;
		font-size: 14px;
		margin-top: 10px;
	}
	
}










</style>
